<template>
  <div class="out-box">
    <div id="right-arr" @click="toSlide('right')">&gt;</div>
    <router-view v-slot="{ Component }">
      <transition :name="slide">
        <component :is="Component" />
      </transition>
    </router-view>
    <home-ruler></home-ruler>
  </div>
</template>

<script>
import HomeRuler from "./HomeRuler.vue";
export default {
  name: "Home",
  components: {
    HomeRuler,
  },
  mounted() {
    // 遍历路由，填充数组
    this.$router.options.routes[0].children.forEach((e) => {
      e.path && this.routes.push(e.path);
    });
  },
  methods: {
    // 按照路由数组进行跳转
    toSlide(action) {
      const self = this;
      this.slide = action;
      let index = this.routes.indexOf(this.$route.path + "");
      let rulerObj = self.$store.state.ruler;
      let actionObj = {
        right: function () {
          // 如果在第一个页面，或者第二个页面但已经到了最后一个（第三个）状态，执行跳转
          if (self.$route.path == "/" || rulerObj.index == 3) {
            index++;
            index = index == -1 ? 0 : index == self.routes.length ? 0 : index;
            self.$router.push(self.routes[index]);
          }
          // 修改保存第二个页面索引的vuex
          self.$store.commit("ruler/indexChange");
        },
      };
      actionObj[action]();
    },
  },
  data() {
    return {
      routes: [],
      slide: "right",
    };
  },
};
</script>

<style lang="less">
::-webkit-scrollbar {
  height: 0px; /* 滚动条宽度*/
  background: transparent;
}

.common {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  color: white;
  font-size: 42px;
  a {
    color: white;
  }
}
#left-arr {
  left: 3%;
  .common();
}
#right-arr {
  right: 3%;
  z-index: 1000;
  .common();
}

.right-enter-active,
.right-leave-active {
  transition: all 0.75s ease-out;
}

.right-enter-to {
  position: absolute;
  right: 0;
}

.right-enter-from {
  position: absolute;
  right: -100%;
}

.right-leave-to {
  position: absolute;
  left: -100%;
}

.right-leave-from {
  position: absolute;
  left: 0;
}
.left-enter-active,
.left-leave-active {
  transition: all 0.75s ease-out;
}

.left-enter-to {
  position: absolute;
  left: 0;
}

.left-enter-from {
  position: absolute;
  left: -100%;
}

.left-leave-to {
  position: absolute;
  right: -100%;
}

.left-leave-from {
  position: absolute;
  right: 0;
}
</style>
